<style scoped>
  .lng-padding {
    padding: 4px 0;
  }

  .top-bar {
    position: absolute;
    z-index: 500;
    top: 0;
    width: 100%;
  }

  .lng-flex > div {
    flex: inherit;
    white-space: nowrap;
    overflow: hidden;
  }

  .search {
    padding: 4px 8px;
    width: 10%;
  }

  .search-btn {
    color: #4791d2;
    font-weight: bold;
    padding: 0 4px;
    width: 300px;
  }

  .top-bar .vux-x-input {
    width: 300px;
    margin: 0 2px;
  }

  .content {
    margin: 1.3rem 0 1.8rem;
  }

 /* .content .lng-flex {
    padding: 10px;
  }*/

  .real-data-content {
    padding: 3px 0;
  }

  .top-select{
    width: 300px;
  }
</style>
<style>
  .top-bar .weui-cell {
    padding: 5px 2px;
    border: 1px solid #C7C7C7;
    border-radius: 4px;
  }
</style>

<template>
  <div>
    <div class="lng-padding top-bar lng-flex">
      <popup-picker class="top-select" :data="stationList" v-model="station" @on-show="onShow" @on-hide="onHide" show-name
                    value-text-align="left"
                    @on-change="onChange" placeholder="请选择站点"></popup-picker>

      <x-input class="search" v-model="name" placeholder="请输入参数名"></x-input>

      <div class="search-btn" @click="search()">
        <i class="icon icon-search"></i>
      </div>
    </div>

    <view-box ref="viewBox">
      <div class="content real-data-content">
        <x-table :cell-bordered="false" style="background-color:#fff;">
          <thead>
          <tr>
            <th>序号</th>
            <th>参数名</th>
            <th>实时值</th>
            <th>单位</th>
            <th>状态</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>储罐液位</td>
            <td>8.54</td>
            <td>kPa</td>
            <td>
              <i class="icon icon-circle green-icon"></i>
            </td>
          </tr>
          <tr>
            <td>2</td>
            <td>储罐压力</td>
            <td>0.74</td>
            <td>mpa</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          <tr>
            <td>3</td>
            <td>调压前压力</td>
            <td>151.92</td>
            <td>kPa</td>
            <td>
              <i class="icon icon-circle green-icon"></i>
            </td>
          </tr>
          <tr>
            <td>4</td>
            <td>调压后温度</td>
            <td>5.74</td>
            <td>℃</td>
            <td>
              <i class="icon icon-circle red-icon"></i>
            </td>
          </tr>
          </tbody>
        </x-table>
      </div>

    </view-box>
  </div>

</template>
<script>
  import {
    PopupPicker,
    Popup,
    XInput,
    XTable,
    Card,
    ViewBox

  } from 'vux'
  import tab from '@/components/monitor/public/tab'
  export default {
    components: {
      tab,
      Popup,
      PopupPicker,
      XInput,
      XTable,
      Card,
      ViewBox
    },
    data() {
      return {
        name: "",
        station: [],
        stationList: [[
          {
            name: '嘉兴XXX加气站',
            value: '1',
          },
          {
            name: '福州XXX加气站',
            value: '2',
          },
        ]],
      }
    },
    methods: {
      search(){

      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide (type) {
        console.log('on hide', type)
      },
    }
  }
</script>


